<template>
  <div>
    <div class="bg-white grid-content">
      <div style="overflow: hidden; ">
        <div class="mytitle"><svg-icon icon-class="yjbb" class="myIcon" /> 分队分系统日报</div>
        <div class="myButtons">
          <el-button @click="handleClick('', 'add')">新增</el-button>
          <el-button @click="uploadData">批量导入</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData">
        <el-table-column v-if="show" type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="rq" label="日期" width="100px">
        </el-table-column>
        <el-table-column align="center" label="树2队">
          <el-table-column align="center" prop="zs" label="注水">
          </el-table-column>
          <el-table-column align="center" prop="js" label="集输">
          </el-table-column>
          <el-table-column align="center" prop="jc" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="sh" label="生活">
          </el-table-column>
          <el-table-column align="center" prop="hj" label="合计">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="树8队">
          <el-table-column align="center" prop="zj_yyzxs" label="注水">
          </el-table-column>
          <el-table-column align="center" prop="zj_sbhyzxs" label="集输">
          </el-table-column>
          <el-table-column align="center" prop="zj_dxhyzxs" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="zj_zyzxs" label="生活">
          </el-table-column>
          <el-table-column align="center" prop="zj_zyzxs" label="合计">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="树16队">
          <el-table-column align="center" prop="zj_yyzxs" label="注水">
          </el-table-column>
          <el-table-column align="center" prop="zj_sbhyzxs" label="集输">
          </el-table-column>
          <el-table-column align="center" prop="zj_dxhyzxs" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="zj_zyzxs" label="生活">
          </el-table-column>
          <el-table-column align="center" prop="zj_zyzxs" label="合计">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="树101队">
          <el-table-column align="center" prop="zj_yyzxs" label="注水">
          </el-table-column>
          <el-table-column align="center" prop="zj_sbhyzxs" label="一期">
          </el-table-column>
          <el-table-column align="center" prop="zj_dxhyzxs" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="zj_zyzxs" label="二期">
          </el-table-column>
          <el-table-column align="center" prop="zj_zyzxs" label="合计">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="作业区">
          <el-table-column align="center" prop="zj_yyzxs" label="注水">
          </el-table-column>
          <el-table-column align="center" prop="zj_sbhyzxs" label="集输">
          </el-table-column>
          <el-table-column align="center" prop="zj_dxhyzxs" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="zj_zyzxs" label="生活">
          </el-table-column>
          <el-table-column align="center" prop="zj_zyzxs" label="合计">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text">查看</el-button>
            <el-button @click="handleClick(scope.row, 'edit')" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination align='right'
          background
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :current-page="pageNo"
          :page-sizes="[5,10, 20, 30, 40, 50]" 
          :page-size="pageSize" 
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog :title="myDialogTitle" :visible.sync="dialogFormVisible" :before-close="handleClose" custom-class="saveAsDialog">

      <el-form :inline="true" :model="fdfxtrbForm" class="demo-form-inline" :rules="rules" ref="fdfxtrbForm" :disabled="isInput" label-position="left" label-width="120px" >
        <!-- <el-divider content-position="left">基础信息</el-divider> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期:">
              <el-date-picker
                v-model="fdfxtrbForm.rq"
                align="right"
                type="date"
                placeholder="请选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">树2队</el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="注水:">
              <el-input
                v-model="fdfxtrbForm.zj_yyzxs"
                placeholder="请输入注水"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="集输:">
              <el-input
                v-model="fdfxtrbForm.zj_sbhyzxs"
                placeholder="请输入集输"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机采:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入机采"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生活:">
              <el-input
                v-model="fdfxtrbForm.zj_zyzxs"
                placeholder="请输入生活"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合计:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入合计"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">树8队</el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="注水:">
              <el-input
                v-model="fdfxtrbForm.zj_yyzxs"
                placeholder="请输入注水"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="集输:">
              <el-input
                v-model="fdfxtrbForm.zj_sbhyzxs"
                placeholder="请输入集输"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机采:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入机采"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生活:">
              <el-input
                v-model="fdfxtrbForm.zj_zyzxs"
                placeholder="请输入生活"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合计:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入合计"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">树16队</el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="注水:">
              <el-input
                v-model="fdfxtrbForm.zj_yyzxs"
                placeholder="请输入注水"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="集输:">
              <el-input
                v-model="fdfxtrbForm.zj_sbhyzxs"
                placeholder="请输入集输"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机采:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入机采"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生活:">
              <el-input
                v-model="fdfxtrbForm.zj_zyzxs"
                placeholder="请输入生活"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合计:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入合计"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">树101队</el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="注水:">
              <el-input
                v-model="fdfxtrbForm.zj_yyzxs"
                placeholder="请输入注水"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一期:">
              <el-input
                v-model="fdfxtrbForm.zj_sbhyzxs"
                placeholder="请输入一期"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机采:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入机采"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二期:">
              <el-input
                v-model="fdfxtrbForm.zj_zyzxs"
                placeholder="请输入二期"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合计:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入合计"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">作业区</el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="注水:">
              <el-input
                v-model="fdfxtrbForm.zj_yyzxs"
                placeholder="请输入注水"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="集输:">
              <el-input
                v-model="fdfxtrbForm.zj_sbhyzxs"
                placeholder="请输入集输"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机采:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入机采"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生活:">
              <el-input
                v-model="fdfxtrbForm.zj_zyzxs"
                placeholder="请输入生活"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合计:">
              <el-input
                v-model="fdfxtrbForm.zj_dxhyzxs"
                placeholder="请输入合计"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="总累计（h）:">
                <el-input v-model="fdfxtrbForm.zlj" placeholder="请输入总累计"></el-input>
              </el-form-item>
            </el-col>
            
          </el-row> -->

      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="close('fdfxtrbForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('fdfxtrbForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import fdfxtApi from '@/api/sjtb/scgl/fdfxtrb';

export default {
  data() {
    return {
      show:false,//隐藏序列
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      // table数据
      tableData: [{
        rq: '2023-02-12',//日期
        bc: '早',//班次
        starttime: '2023-03-03 13:46:14',//启动时间
        endtime: '2023-03-03 13:46:14',//停止时间
        byz: 2,//班运转（h）
        ylj: '3',//月累计（h）
        zlj: '5',//总累计（h）
        zbr: 'srt',//值班人
      }, {
        rq: '2023-02-13',//日期
        bc: '早',//班次
        starttime: '2023-03-03 13:46:14',//启动时间
        endtime: '2023-03-03 13:46:14',//停止时间
        byz: 2,//班运转（h）
        ylj: '3',//月累计（h）
        zlj: '5',//总累计（h）
        zbr: 'srt',//值班人
      }],
      //当前页码
      currentPage: 1,
      //表单填报的数据
      fdfxtrbForm: {
        id:'',
        // approveStatus:'',//审核状态
        rq: '',//填报日期
        sj: '',//月份
        zjyyzxs: '',//主机月运转小时
        zjsbhyzxs: '',//主机三保后运转小时
        zjdxhyzxs: '',//主机大修后运转小时
        zjzyzxs: '',//主机总运转小时
        fjyyzxs: '',//副机月运转小时
        fjsbhyzxs: '',//副机三保后运转小时
        fjdxhyzxs: '',//副机大修后运转小时
        fjzyzxs: '',//副机总运转小时
        rlts: '',//日历天数
        whts: '',//完好天数
        whl: '',//完好率
        jhsj: '',//计划时间
        sjkdsj: '',//实际开动时间
        lyl: '',//利用率
      },
      //验证规则
      rules: {
        sj: [
          { required: true, message: '请选择日期', trigger: 'blur' },
        ],
      },
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      //获取当前日期
      currentTime:'',
      //编辑框是否显示
      dialogFormVisible: false,
      //弹出框是否是查看
      ischeck: false,
      //控制查看时不可更改数据
      isInput:false,
      //弹出框标题
      myDialogTitle: '',
    }
  },
  created(){
    this.search();
  },
  mounted(){
    this.filterTime();
    // this.initDate();
  },
  methods: {
    /**
    * 查询列表
    */
    async search() {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await fdfxtApi.getFdfxtList(this.pageNo,this.pageSize);
      //判断是否成功
      if(res.success){
        console.log(res.data);
        //赋值
        this.tableData = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    onSubmit() {
      console.log('submit!');
    },
    //关闭对话框
    handleClose(done) {      
      // 清空表单
      // this.$refs['fdfxtrbForm'].resetFields();
      // 清空表单校验，避免再次进来会出现上次校验的记录
      this.$refs['fdfxtrbForm'].clearValidate()
      done()
      
    },
      // 弹框关闭触发
    close(formName) {
      this.dialogFormVisible = false;
      // 清空表单
      // this.$refs[formName].resetFields();
      // 清空表单校验，避免再次进来会出现上次校验的记录
      this.$refs[formName].clearValidate()
    },

    submitForm(formName) {
      //表单验证
      this.$refs[formName].validate(async (valid) => {
          if (valid) {
              let res = null;
              console.log(this.fdfxtrbForm.id+"111")
              //判断菜单ID是否为空
              if (this.fdfxtrbForm.id === '') {
                // this.fdfxtrbForm.rq = this.currentTime;//填报日期
                  //发送添加请求
                  res = await fdfxtApi.addFdfxt(this.fdfxtrbForm);
              } else {
                  //发送修改请求
                  // this.fdfxtrbForm.approveStatus = 0;
                  // console.log(334345)
                  res = await fdfxtApi.updateFdfxt(this.fdfxtrbForm);
              }
              console.log(res)
              //判断是否成功
              if (res.success) {
                  this.$message.success(res.message);
                  //刷新
                  this.search();
                  //关闭窗口
                  this.dialogFormVisible = false;
              } else {
                console.log(res)
                  this.$message.error(res.message);
              }
          }
      })
    },
    handleClick(row, handle) {
      // console.log(row.approveStatus);
      this.dialogFormVisible = true;
      if (handle == 'check') {
        this.myDialogTitle = '分队分系统日报报表'
        this.ischeck = true
        this.isInput = true;// 1.表单禁用
        // this.fdfxtrbForm = row
        this.$objCopy(row, this.fdfxtrbForm);//把当前要编辑的数据复制到数据域，给表单回显
        this.$message({ message: '成功打开', type: 'success' });
      } else if (handle == 'edit') {
          // if(row.approveStatus!=1){
            this.myDialogTitle = '分队分系统日报报表编辑'
            this.ischeck = false  
            this.isInput = false     
            this.$objCopy(row, this.fdfxtrbForm);//把当前要编辑的数据复制到数据域，给表单回显
          // }
          // else {
          //   this.dialogFormVisible = false;
          //   this.$message({ message: '已通过不可修改！', type: 'error' });
          // }
      } else if (handle == 'add') {
        // this.fdfxtrbForm ={}
        this.$resetForm("fdfxtrbForm", this.fdfxtrbForm); //清空表单数据
        this.myDialogTitle = '分队分系统日报报表填报'
        this.ischeck = false
        this.isInput = false
      }
      // console.log(row);
    },
    uploadData() {
      console.log('批量导入成功')
    },
    // //每页条数改变时触发 选择一页显示多少行
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    //   this.currentPage = 1;
    //   this.pageSize = val;
    // },
    // //当前页改变时触发 跳转其他页
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    //   this.currentPage = val;
    // },
    /*** 当每页数量发生变化时触发该事件 */
    handleSizeChange(size) {
      console.log(size);
      this.pageSize = size;
      //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /*** 当页码发生变化时触发该事件 */
    handleCurrentChange(page) {
      console.log(page);
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    // 序号计算
    indexMethod (index) {
    // index默认在0开始，这里+1
      return index + 1 + (this.pageNo - 1) * this.pageSize
    },
    // 获取当前日期
    filterTime() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? '0' + m : m;
      var d = date.getDate();
      d = d < 10 ? '0' + d : d;
      this.currentTime = y + '-' + m + '-' + d;
    },
  }
}
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}

//表单禁用字体样式
.el-input.is-disabled ::v-deep .el-input__inner {
    color: #606266;
  }
//对话框宽度
// .customWidth{
//         width:80%;
//     }
::v-deep .saveAsDialog {
  width: 50% !important;
}
//日期选择框宽度
.el-date-editor.el-input, .el-date-editor.el-input__inner { width: 200px; }

.el-input {
  width: 200px;
}
</style>